<!-- 头部标签页组件
组件功能独立，不需要与其他组件通信
-->

<template>
    <div class="tag-list">
        <el-scrollbar style="width: 100vw;" ref="refScrollbar" @wheel.prevent="handleScroll">
            <div class="scrollbar-flex-content">
                <template v-for="(item, index) in openTags" :key="item.fullPath">
                    <el-dropdown @command="handerCommand" trigger="contextmenu" @contextmenu.native="hiddeDrop">
                        <!-- 标签 -->
                        <div class="el-dropdown-link">
                            <el-tag :class="{ 'tag-active': item.fullPath == route.fullPath }"
                                @click="handerClickTag(index)" @close="removeTag(index)" type="info" effect="plain"
                                :closable="item.fullPath !== '/index/home'">
                                <el-icon class="active-icon">
                                    <LocationFilled />
                                </el-icon>
                                <span>{{ $t(item.meta.title) }}</span>
                            </el-tag>
                        </div>
                        <!-- 功能 -->
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item :icon="RefreshRight" :command="{ code: 1, fullPath: item.fullPath }">
                                    刷新
                                </el-dropdown-item>
                                <el-dropdown-item :icon="Close"
                                    :disabled="index == openTags.length - 1 || openTags.length == 1"
                                    :command="{ code: 2, fullPath: item.fullPath }">
                                    关闭右标签
                                </el-dropdown-item>
                                <el-dropdown-item :icon="CircleClose" :disabled="openTags.length == 1"
                                    :command="{ code: 3, fullPath: item.fullPath }">
                                    全部关闭
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </div>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
import { LocationFilled, RefreshRight, Close, CircleClose } from '@element-plus/icons-vue';
import { openTagsStore } from '@/stores/opentags';
import { ref, watch } from 'vue';
import { useRoute, useRouter, type RouteLocationNormalized } from 'vue-router';

// openTags初始值(首页)要从pinia中获取
let firstTag = openTagsStore().openTags
let openTags = firstTag

// 路由
const route = useRoute()

// 路由器
const router = useRouter()

// 监听路由
watch(route, (route) => {
    addTab(route)
})

/**
 * 移除标签
 * @param index 要移除的标签在数组中的下标
 */

const removeTag = (index: number) => {
    let open_Tags = openTags
    let tag = openTags[index]
    // 删除当前激活的标签，优先显示后面的标签,如果没有显示前面的标签
    if (tag.fullPath == route.fullPath) {
        // 获取需要跳转的路由name
        let { fullPath } = open_Tags[index + 1] || open_Tags[index - 1]
        router.push(fullPath)
    }
    open_Tags.splice(index, 1)
}

/**
 * 新增标签
 * @param route 路由
 */
const addTab = (route: RouteLocationNormalized) => {
    // 过滤重定向页面
    if (route.name == 'redirect') {
        return
    }

    let open_Tags = openTags
    let findTag = open_Tags.find((p) => p.fullPath == route.fullPath)
    if (!findTag) {
        const { fullPath, meta: { title } } = route
        open_Tags.push({ fullPath, meta: { title: title as string } })
    }
}

/**
 * 单击标签页
 * @param index 单击标签所在标签数组的下标
 */
const handerClickTag = (index: number) => {
    let tag = openTags[index]
    console.log(tag);

    if (tag.fullPath != route.fullPath) {
        router.push(tag.fullPath)
    }
}

// 创建后，添加当前路由
addTab(route)

// 监听openTags值的变化来存储到pinia
watch(openTags, (newValue, oldValue) => {
    console.log('监听openTags已触发', newValue)
    openTagsStore().toTags(newValue)
})


/**
 * 菜单项点击处理事件
 * @param code 单击的位置，用于switch判断
 * @param fullPath 完整的路径
 */
const handerCommand = ({ code, fullPath }: { code: number, fullPath: string }) => {
    let open_Tags = openTags
    switch (code) {

        // 刷新
        case 1:
            let tag = open_Tags.find((item) => item.fullPath == fullPath)
            router.push({ path: '/index/redirect/' + tag?.fullPath })       //   ?.   es11新特性：可选链运算符
            break;

        // 关闭右侧
        case 2:
            // 右击标签索引
            let index = open_Tags.findIndex((item) => item.fullPath == fullPath)
            // 当前标签激活索引
            let activeIndex = open_Tags.findIndex((item) => item.fullPath === route.fullPath)
            // 删除右侧所有标签
            open_Tags.splice(index + 1)
            // 当前页面被删除，显示右击菜单页
            if (activeIndex > index) {
                router.push(openTags[index].fullPath)
            }
            break;

        // 关闭全部
        case 3:
            openTags.splice(1)
            router.push({ name: "home" })
            break;

        default:
            break;
    }
}

/**
 * 模拟点击事件，达到只显示一个下拉框的效果
 */
const hiddeDrop = () => {
    document.body.click()
}


const refScrollbar = ref();
/**
 * 对标签页的上下滚动做处理，使其变成左右滚动
 * @param e 事件源
 */
const handleScroll = (e: { wheelDelta: number; deltaY: number }) => {
    const wheelDelta = e.wheelDelta;

    const scrollbar = refScrollbar.value;
    // scrollbar.wrap$获取到包裹容器的element对象
    scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft - wheelDelta);
    console.log(scrollbar);
};
</script>

<style scoped lang="less">
// 标签页列表
.tag-list {
    border: 1px solid var(--el-fill-color-dark);
    margin: 0 -20px 5px;
    padding: 5px 20px;
    display: flex;
    box-shadow: var(--el-border-color-dark) 0 7px 4 -7px;

    &::v-deep .el-scrollbar__view {
        display: flex;
    }
}

.el-tag {
    margin-right: 7px;
    // 去掉默认样式
    border-radius: 0;
    height: 28px;
    line-height: 28px;
    color: var(--el-text-color-regular);
    cursor: pointer;
}


.tag-active {
    background-color: black;
    color: white;
    font-weight: bold;
    // font-size: .9rem;
}

.scrollbar-flex-content {
    display: flex;
}
</style>